<template>
  <div class="time-display">
    {{ formattedTime }}
  </div>
</template>

<script>
export default {
  name: "TimeDisplay",
  data() {
    return {
      currentTime: new Date(),
      timer: null,
    }
  },
  computed: {
    formattedTime() {
      const date = this.currentTime;
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      const hour = date.getHours().toString().padStart(2, "0");
      const minute = date.getMinutes().toString().padStart(2, "0");
      const second = date.getSeconds().toString().padStart(2, "0");
      const weekDays = ["日", "一", "二", "三", "四", "五", "六"];
      const weekDay = weekDays[date.getDay()];
      // eslint-disable-next-line no-irregular-whitespace
      return `${year}年${month}月${day}日　${hour}:${minute}:${second}　星期${weekDay}`
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentTime = new Date();
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  // 如果使用 Vue 3，请使用 unmounted 钩子：
  // unmounted() {
  //   if (this.timer) {
  //     clearInterval(this.timer);
  //   }
  // }
}
</script>

<style scoped>
.time-display {
  font-weight: 400;
  font-size: 16px;
  color: #A7C5D9;
  line-height: 16px;
  text-align: left;
}
</style>
